import React from "react";
import Styles from "./proxy-render.module.scss";

export default class ProxyRender extends React.Component {
  state = {
    arr: [
      {
        name: "千锋",
      },
    ],
  };

  add() {
    // 当前总数为偶数 正常添加
    if (this.state.arr.length % 2 === 0) {
      this.setState({
        arr: [...this.state.arr, { name: "千锋" }],
      });
    } else {
      this.setState({
        arr: [
          ...this.state.arr,
          { name: "千锋" },
          { name: "千锋" },
          { name: "千锋" },
        ],
      });
    }
  }

  /**
   * 每次渲染前 触发
   * 可以return false 不渲染 true渲染
   *
   * 这里直接使用this.state 拿不到最新最新的数据
   */
  shouldComponentUpdate(nextProps, nextState) {
    // 总数大于20且小于30 页面不渲染
    return !(nextState.arr.length >= 20 && nextState.arr.length < 30);
  }

  render() {
    return (
      <div>
        <div>劫持渲染哈哈哈</div>
        <div>
          - 渲染一个列表 点击按钮添加 <br />
          - 总数是奇数时每次点击额外添加两个 偶数是正常添加 <br />
          - 总数大于20 且 小于 30页面不渲染 <br />
          - 大于30页面正常渲染
          <br />
          - 每个块都要有一个序号，按顺序排列 <br />
        </div>
        <button onClick={() => this.add()}>添加</button>
        <div className={Styles["block-box"]}>
          {this.state.arr.map((item, index) => (
            <div className={Styles["block-item"]} key={index}>
              {item.name}——{index + 1}
            </div>
          ))}
        </div>
      </div>
    );
  }
}
